
<!-- 健康方案 -->

<template>
  <el-row>
    <el-col :span="6">
      <el-input v-model="name" placeholder="档案号/姓名"> </el-input>
    </el-col>
    <el-col :span="6" :push="1">
      <el-button type="primary" @click="listAxios">搜索</el-button>
    </el-col>
    <el-col :span="24">
      <el-button type="primary" @click="addHealthPlanbtn">新增</el-button>
    </el-col>

    <el-col :span="24">
      <el-table
        :data="healthPlanTavle"
        stripe
        style="width: 100%"
        @click="listAxios"
        :header-cell-style="{ background: 'rgb(39,49,70)', color: '#ffffff' }"
      >
        <el-table-column prop="id" label="序号"> </el-table-column>
        <el-table-column prop="num" label="编码"> </el-table-column>
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column prop="keyword" label="关键词"> </el-table-column>
        <el-table-column prop="category" label="方案类别"> </el-table-column>
        <el-table-column prop="content" label="内容"> </el-table-column>
        <el-table-column prop="state" label="状态">
          <template scope="scope">
            <div>
              {{ scope.row.ban | stateQuery }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template scope="scope">
             <el-button size="mini" plain @click="events(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" plain @click="deleteHealthPlan(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="10" :push="14">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 50, 100]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(count)"
      >
      </el-pagination>
    </el-col>

    <el-col>
      <el-dialog :title="modelName" :visible.sync="dialogFormAdd">
        <el-form :model="form">
          <el-form-item label="方案标题" :label-width="formLabelWidth">
            <el-input
              v-model="form.title"
              autocomplete="off"
              :disabled="form.id != '' ? true : false"
            ></el-input>
          </el-form-item>
          <el-form-item label="关键词" :label-width="formLabelWidth">
            <el-input v-model="form.keyword" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="编码" :label-width="formLabelWidth">
            <el-input v-model="form.num" autocomplete="off"></el-input>
          </el-form-item>
          <el-row>
            <el-form-item
              label="方案类别"
              prop="category"
              :label-width="formLabelWidth"
            >
              <el-select v-model="form.category" autocomplete="off">
                <el-option label="心理干预" value="0"></el-option>
                <el-option label="戒烟限酒" value="1"></el-option>
                <el-option label="饮食干预" value="2"></el-option>
                <el-option label="运动干预" value="3"></el-option>
                <el-option label="注意事项" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-form-item label="内容" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              v-model="form.content"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input
              type="textarea"
              v-model="form.remarks"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="建议状态" :label-width="formLabelWidth">
            <el-radio v-model="form.ban" :label="1">启用</el-radio>
            <el-radio v-model="form.ban" :label="0">禁用</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addAdmin()">确 定</el-button>
          <el-button @click="dialogFormAdd = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-col>
  </el-row>
</template>

<script>
export default {

  data() {
    return {
      page: 1,
      limit: 5,
      name: "",
      healthPlanTavle: [],
      count: "",

      //主页表单面数据渲染

      form: {
        name: "",
        ban: "",
        category: "",
        content: "",
        created: "",
        deleted: "",
        id: "",
        keyword: "",
        // num: "",
        remarks: "",
        state: "",
        title: "",
        updated: "",
      },
      dialogTableVisible: false,
      dialogFormAdd: false,
      formLabelWidth: "120px",
      modelName: "新增",
    };
  },
  created() {
    this.listAxios();
  },
  methods: {
    handleSizeChange(val) {
      this.limit = Number(val);
      this.listAxios();
    },
    handleCurrentChange(val) {
      this.page = Number(val);
      this.listAxios();
    },
    // 查询axios调用
    listAxios() {
      this.$axios({
        method: "GET",
        url: "/healthPlan/list",
        params: { page: this.page, limit: this.limit, name: this.name },
      }).then((res) => {
        //console.log(res);
        this.healthPlanTavle = res.data;
        this.count = res.count;
      });
    },

    //新增按钮
    addHealthPlanbtn() {
      this.form = {
        id: "",
        name: "",
        result: "",
        state: "1",
        remarks: "",
        created: "2022-07-21T02:23:17.587Z",
        ban: 0,
        updated: "2022-07-21T02:23:17.587Z",
        deleted: 0,
        category: "",
        content: "",
        keyword: "",
        num: "",
        title: "",
      };
      this.dialogFormAdd = true;
    },
    events(e) {
      this.modelName = "修改";
      this.dialogFormAdd = true;
      this.form = { ...e };
    },
    addAdmin(e) {
      this.modelName = e;
      if (this.form.id == "") {
        this.$axios({
          method: "POST",
          url: "/healthPlan/add",
          data: this.form,
        }).then((res) => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "添加成功!",
            });
            this.listAxios();
          }
        });
      } else {
        this.$axios({
          method: "POST",
          url: "/healthPlan/update",
          data: this.form,
        }).then((res) => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            this.listAxios();
          }
        });
      }

      this.dialogFormAdd = false;
    },
    deleteHealthPlan(e) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios({
          method: "GET",
          url: "/healthPlan/delete",
          params: { id: e.id },
        }).then((res) => {
          if (res.code === 0) {
            this.listAxios();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        });
      });
    },
  },
  // 过滤器
  filters: {
    stateQuery: function (value) {
      return value == 1 ? "启用" : "禁用";
    },
  },
};
</script>

<style scoped>
.el-col {
  margin-bottom: 20px;
}
</style>